<!--
 * @Descripttion: 专家预约list
 * @version: 
 * @Author: lihk
 * @Date: 2023-12-28 15:50:10
 * @LastEditors: lihk
 * @LastEditTime: 2024-01-04 11:36:43
-->
<template>
  <view class="content">
    <LfHeader title="我的预约"></LfHeader>
    <LfDate :timeList="timeList" @change="changeDate" :isProfessor="true"></LfDate>
    <view class="professor-container" v-for="item,index in orderList" @click="toChat(item,index)">
      <view>
        <img :src="item.order_headUrl" alt="">
      </view>
      <view class="item-container">
        <span>{{item.order_name}}</span>
        <view class="desc">
          预约时间：{{item.date}} {{filterTime(item.timeId)}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { delOrder, getProfessorAppointments, getUserInfo, myOrder } from '../../utils/http';
import { timeList } from '../json/time'
export default {
  data () {
    return {
      orderList: [],
      professorParams: {},
      timeList: [{
        id: 1,
        time: '09:00-12:00',
        name: '上午',
        count: 0
      }, {
        id: 2,
        time: '13:00-18:00',
        name: '下午',
        count: 0
      }]
    };
  },
  created () {
    if (!this.$store.state.userInfo) {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
    this.professorParams.professorId = this.$store.state.userInfo.id
  },
  methods: {
    changeDate (e) {
      this.professorParams = { ...this.professorParams, ...e }
      this.getAppointment()
    },
    filterTime (timeId) {
      const res = timeList.find(item => item.id === timeId)
      return res.time
    },
    async getAppointment () {
      const { data } = await getProfessorAppointments(this.professorParams);

      const getUserInfoPromises = [];
      for (const element of data) {
        getUserInfoPromises.push(this.getUserInfo(element.userId));
      }

      const userInfos = await Promise.all(getUserInfoPromises);

      for (let i = 0; i < data.length; i++) {
        const userInfo = userInfos[i];
        const element = data[i];
        if (userInfo) {
          element.order_headUrl = userInfo.headUrl;
          element.order_name = userInfo.lastName +userInfo.firstName;
        }
      }

      const groupedData = {
        1: [],
        2: []
      };

      for (const item of data) {
        groupedData[item.timeId].push(item);
      }

      this.timeList[0].count = groupedData[1].length;
      this.timeList[1].count = groupedData[2].length;
      this.orderList = groupedData[this.professorParams.timeId];
    },
    async getUserInfo (userId) {
      const { data } = await getUserInfo(userId)
      return data
    },
    toChat (item) {
      const { professorId } = this.professorParams;
      const { userId } = item;
      uni.navigateTo({
        url: `/pages/chat/professorChat?professorId=${professorId}&userId=${userId}`
      });
    },
  }
}
</script>

<style lang="scss">
.professor-container {
  margin: 0 15px;
  margin-top: 10px;
  padding: 10px 15px;
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .item-container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 10px;
    // 超出两行隐藏显示省略号
    .desc {
      font-size: 13px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
    }
  }
}
</style>
